<template>
    <div class="width-height-100" style="overflow-y: auto;position: absolute;left: 0" v-loading="isLoading"
         element-loading-text="问卷信息加载中...">
        <!--    标题-->
        <div class="box-bacg" style="min-height: 112px;margin-bottom: 20px;padding: 20px">
            <div class="div-outline title"
                 style="width: 100%;text-align: center;margin-bottom: 20px;font-weight: bold;">
                <el-input v-model="formGlobalConf1.topTitle"></el-input>
            </div>
            <div class="div-outline title" style="width: 100%;text-align: left">
                <el-input v-model="formGlobalConf1.titleTip"></el-input>
            </div>
        </div>
        <div v-for="item in containerConfigList" :key="item.id" class="box-bacg cursor-pointer"
             style="min-height: 50px;padding: 0 20px;margin-bottom: 20px"
             @mouseenter="item.isHover = true" @mouseleave="item.isHover = false" @click.stop="clickHoverBorder(item)"
             :class="[item.isClick ? 'active-bordert' : '']">
            <div class="flex-row" style="justify-content: space-between;height: 50px">
                <div class="flex-row" @click.stop="toggleExpend(item)">
          <span :class="[item.isExpand ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"
                style="margin-right: 5px"></span>
                    <div :key="item.id" class="div-outline title-content"
                         style="width: 100%;display: flex;align-items: center">
                        <span style="margin-right: 5px">{{ item.sortTitle }}</span>
                        <el-input v-model="item.title" :disabled="item.isSole ? true : false"></el-input>
                    </div>
                </div>
                <div v-if="item.isHover" class="flex-row">
                    <span class="el-icon-delete font-color-main" @click="delSourceZu(item)"></span>
                </div>
            </div>
            <div v-if="item.isExpand"
                 :style="{height:item.isExpand && item.widgetList.length ? 'auto' : item.isExpand ? '210px' : '50px'}"
                 style="padding-bottom: 20px;position: relative">
                <draggable v-model="item.widgetList"
                           style="height: 100%"
                           handle=".drag-handler"
                           v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 300}"
                           @add="(e) => handleAdd(e,item.widgetList)"
                >
                    <transition-group  name="fade" tag="div">
                        <template v-if="item.widgetList.length">
                            <component :is="itemComp.type + '-editor'" v-for="(itemComp,index) in item.widgetList"
                                       :childInd="index"
                                       :key="itemComp.id + index"
                                       :compOption="itemComp" :prentCompOption="item" @changeClick="clickToggle"
                                       style="margin-bottom: 10px"></component>
                        </template>
                        <template v-else>
                            <div style="height: 100%;justify-content: center;position: relative;top: 60px" class="flex-row" key="123">
                                在左侧题型列表，点击或拖动题型添加题目
                            </div>
                        </template>
                    </transition-group>
                </draggable>
            </div>
        </div>
        <div style="width: 100%;display: flex;justify-content: center;align-items: center;
font-size: 14px;margin-top: 10px" class="cursor-pointer" @click="addErrorZu">
            <span class="iconfont icon-tianjia" style="margin-right: 5px"></span>
            <div>添加问题组</div>
        </div>
    </div>
</template>
<script>
import Draggable from 'vuedraggable'
import {uuid} from 'vue-uuid'
import {containerConfigList, formGlobalConf} from '@/components/form-designer/container-panel/containerConfig'

export default {
    name: "index",
    components: {
        Draggable
    },
    props: {},
    data() {
        return {
            containerConfigList: null,
            formGlobalConf1: null,
            isLoading:false,
            dragging: false,
        }
    },
    created() {
      this.isLoading = true
    },
    mounted() {
        setTimeout(()=>{
            this.isLoading = false
            this.containerConfigList = containerConfigList
            this.formGlobalConf1 = formGlobalConf
        },1000)
    },
    methods: {
        handleAdd(evt,list){
            console.log(evt,'evt')
            console.log(list,'list')
        },
        clickToggle(slefId, prentId) {
            const prentInd = containerConfigList.findIndex(item => item.id == prentId)
            const index = containerConfigList[prentInd].widgetList.findIndex(item => item.id == slefId)
            if (prentInd != -1) {
                containerConfigList[prentInd].widgetList.forEach(item => {
                    item.isClick = false
                })
                if (index != -1) {
                    containerConfigList[prentInd].widgetList[index].isClick = true
                }
                this.$emit('throwId', slefId, prentId)
                this.$forceUpdate()
            } else {
                this.$message.error('未知错误，找不到此唯一值')
            }
        },
        clickHoverBorder(row) {
            containerConfigList.forEach(item => item.isClick = false)
            const index = containerConfigList.findIndex(item => item.id == row.id)
            if (index != -1) {
                containerConfigList[index].isClick = true
                this.containerConfigList = containerConfigList
            }

            this.$emit('throwContWig', row)
        },
        toggleExpend(row) {
            const index = containerConfigList.findIndex(item => item.id == row.id)
            if (index != -1) {
                if (containerConfigList[index].isExpand) containerConfigList[index].isExpand = false
                else containerConfigList[index].isExpand = true
                this.containerConfigList = containerConfigList
            }
        },
        addErrorZu() {
            this.containerConfigList.push({
                title: '默认问题组' + this.containerConfigList.length,
                isExpand: false,
                isHover: false,
                isClick: false,
                isSole: false,
                id: uuid.v4(),
                widgetList: [],
                sortTitle: this.containerConfigList.length + 1 + '',
                itemTotalSource: 0,
                parentWeight: 0,
                isPrentAndChildSort: true,//是否参与父级容器和子项排序
                isChildSort: true,//是否开启子项排序
            })

            console.log(this.containerConfigList, 'this.containerConfigList-this.containerConfigList')
        },
        delSourceZu(item) {
            if (item.title == '默认问题组') return this.$message.error('默认问题组不可删除')
            this.$confirm('是否确认删除' + item.title, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const ind = this.containerConfigList.findIndex(row => row.id == item.id)
                if (ind > -1) {
                    this.containerConfigList.splice(ind, 1)
                    this.$message.success('删除成功')
                }
            })
        },
    }
}
</script>
<style scoped lang="scss">
.box-bacg {
  background: #fff;
  border-radius: 4px;
}

.title ::v-deep .el-input__inner {
  border: none;
  text-align: center;
}

.title-content ::v-deep .el-input__inner {
  border: none;
}
.ghost{
  content: '';
  font-size: 0;
  height: 3px;
  box-sizing: border-box;
  background: $--color-primary;
  border: 2px solid $--color-primary;
  outline-width: 0;
  padding: 0;
  overflow: hidden;
}


.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .disable-transitions * {
    transition: none !important;
    animation: none !important;
  }
}
</style>
